<template>
  <div class="center_bottom">
    <!-- 非全屏模式：原有的选择界面 -->
    <div class="smart-qa-container">
      <el-button
        @click="toggleFullscreen"
        size="mini"
        type="text"
        class="fullscreen-btn"
        :title="isFullscreen ? '退出全屏' : '进入全屏'"
      >
        <i
          :class="
            isFullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen'
          "
        ></i>
      </el-button>

      <!-- AI机器人和数据类型侧边布局 -->
      <div class="ai-robot-section">
        <!-- 左侧数据类型选项 -->
        <div class="data-types-left">
          <div
            v-for="(type, index) in leftDataTypes"
            :key="type.key"
            class="data-type-side-item"
            :class="{ active: selectedType === type.key }"
            :style="getLeftSideStyle(index)"
            @click="selectDataType(type)"
          >
            <div class="type-icon">
              <i :class="type.icon"></i>
            </div>
            <div class="type-name">{{ type.name }}</div>
            <div class="type-status" :class="type.status">
              <span class="status-dot"></span>
            </div>
            <!-- 连接线 -->
            <div class="connection-line" v-if="selectedType === type.key"></div>
          </div>
        </div>

        <!-- 中央AI机器人 -->
        <div class="ai-robot-container">
          <div class="robot-avatar">
            <div class="robot-image-wrapper">
              <img
                src="../../assets/img/ai-robot.png"
                alt="AI Robot"
                class="robot-image"
                :class="{ speaking: isTyping }"
              />
              <!-- 状态指示器 -->
              <div class="status-indicator">
                <div
                  class="status-light"
                  :class="selectedType ? 'active' : 'standby'"
                ></div>
              </div>
              <!-- 呼吸光环效果 -->
              <div
                class="robot-glow"
                :class="selectedType ? 'active' : 'standby'"
              ></div>
            </div>
          </div>
          <div class="robot-info">
            <h3>AI智能助手</h3>
            <p v-if="!selectedType">请选择数据类型开始查询</p>
            <p v-else>{{ selectedTypeInfo.name }}数据分析中...</p>
          </div>
        </div>

        <!-- 右侧数据类型选项 -->
        <div class="data-types-right">
          <div
            v-for="(type, index) in rightDataTypes"
            :key="type.key"
            class="data-type-side-item"
            :class="{ active: selectedType === type.key }"
            :style="getRightSideStyle(index)"
            @click="selectDataType(type)"
          >
            <div class="type-icon">
              <i :class="type.icon"></i>
            </div>
            <div class="type-name">{{ type.name }}</div>
            <div class="type-status" :class="type.status">
              <span class="status-dot"></span>
            </div>
            <!-- 连接线 -->
            <div class="connection-line" v-if="selectedType === type.key"></div>
          </div>
        </div>
      </div>

      <!-- 输入框区域 -->
      <div class="input-area">
        <el-input
          v-model="inputText"
          :placeholder="
            selectedType
              ? `请输入关于${selectedTypeInfo.name}的问题...`
              : '请先选择数据类型后提问...'
          "
          @keyup.enter.native="sendMessage"
          :disabled="!selectedType"
          size="medium"
          class="input-box"
        >
          <template slot="append">
            <el-button
              @click="sendMessage"
              :loading="isTyping"
              :disabled="!inputText.trim() || !selectedType"
              type="primary"
            >
              <i class="el-icon-position"></i>
            </el-button>
          </template>
        </el-input>
      </div>
    </div>

    <!-- 对话弹框组件 -->
    <ConversationDialog
      :visible="isFullscreen"
      :selectedTypeInfo="selectedTypeInfo"
      @close="handleDialogClose"
    />
  </div>
</template>

<script>
  import { currentGET } from "api";
  import axios from "axios";
  import {
    getCurrYMD,
    formatTimestamp,
    generateSecureRandomString,
  } from "@/utils/screen/commFun.js";
  import ConversationDialog from "./conversation-dialog.vue";

  export default {
    components: {
      ConversationDialog,
    },
    data() {
      return {
        inputText: "",
        isTyping: false,
        isFullscreen: false,
        selectedType: "studentProfile",
        dataTypes: [
          {
            key: "studentProfile",
            name: "新生画像",
            description: "新生基本信息统计分析",
            icon: "el-icon-user",
            status: "online",
            statusText: "实时",
            quickQueries: [
              "优秀学子风采",
              "学业奖励情况",
              "贫困生资助",
              "生源质量分析",
            ],
            appId: "46516",
          },
          {
            key: "reportProgress",
            name: "报到进度",
            description: "实时报到进度跟踪",
            icon: "el-icon-time",
            status: "online",
            statusText: "实时",
            quickQueries: ["预计完成时间", "未报到情况"],
            appId: "46527",
          },
          {
            key: "collegeAnalysis",
            name: "学院分析",
            description: "各学院报到详细分析",
            icon: "el-icon-school",
            status: "online",
            statusText: "实时",
            quickQueries: ["学院报到排名", "专业报到率"],
            appId: "46521",
          },
          {
            key: "serviceSupport",
            name: "服务保障",
            description: "后勤服务与资源保障",
            icon: "el-icon-service",
            status: "online",
            statusText: "实时",
            quickQueries: ["宿舍分配情况", "校车运行状态"],
            appId: "46529",
          },
          {
            key: "smartAssistant",
            name: "智能助手",
            description: "常见问题与智能引导",
            icon: "el-icon-chat-dot-square",
            status: "online",
            statusText: "实时",
            quickQueries: [
              "热门问题TOP10 ",
              "办事流程指南",
              "校园导航",
              "联系方式查询",
            ],
            appId: "46525",
          },
          {
            key: "decisionAnalysis",
            name: "决策分析",
            description: "管理决策支持与数据洞察",
            icon: "el-icon-pie-chart",
            status: "online",
            statusText: "实时",
            quickQueries: ["对比历年数据"],
            appId: "46528",
          },
        ],
        // 智能体相关配置
        accessKey: "12d087678e2945a0ba1010e67aef5c36", // 访问密钥
        currTokey: "", // 当前token
        selectChatId: "",
      };
    },
    computed: {
      selectedTypeInfo() {
        return (
          this.dataTypes.find((type) => type.key === this.selectedType) || {}
        );
      },
      leftDataTypes() {
        return this.dataTypes.slice(0, 3); // 前三个放左侧
      },
      rightDataTypes() {
        return this.dataTypes.slice(3, 6); // 后三个放右侧
      },
    },
    mounted() {
      document.addEventListener("keydown", this.handleKeydown);
      // 初始化智能体
      this.initializeAI();
    },
    beforeDestroy() {
      document.removeEventListener("keydown", this.handleKeydown);
    },
    methods: {
      // 初始化AI
      async initializeAI() {
        try {
          // 设置默认对话智能体 Id
          this.selectChatId = this.dataTypes[0].appId;
          this.$store.commit("SET_CHAT_ID", this.selectChatId);
          await this.getToken();
        } catch (error) {
          console.error("初始化AI失败:", error);
        }
      },

      async getToken() {
        try {
          const resD = await axios.post(
            "https://owner-b.xauat.edu.cn/huayun-ai/client/auth/get_token",
            { accessKey: this.accessKey }, //胡杰
            {
              // 添加自定义标识，告诉拦截器跳过 X-Access-Key
              skipAccessKey: true,
            }
          );

          if (resD.code === 200) {
            this.currTokey = resD.data.accessToken;
            this.$store.commit("SET_CHAT_TOKEN", resD.data.accessToken);
            return true;
          }
          throw new Error(resD.msg || "获取Token失败");
        } catch (error) {
          console.error("获取Token失败:", error);
          throw error;
        }
      },

      getLeftSideStyle(index) {
        const spacing = 90; // 垂直间距
        const yOffset = (index - 1) * spacing; // 居中分布

        return {
          transform: `translateY(${yOffset}px)`,
          animationDelay: `${index * 0.3}s`,
        };
      },

      getRightSideStyle(index) {
        const spacing = 90; // 垂直间距
        const yOffset = (index - 1) * spacing; // 居中分布

        return {
          transform: `translateY(${yOffset}px)`,
          animationDelay: `${(index + 3) * 0.3}s`,
        };
      },

      async selectDataType(type) {
        this.selectedType = type.key;

        // 切换selectChatId为对应项的appId
        if (type.appId) {
          this.selectChatId = type.appId;
          // 触发SET_CHAT_ID
          this.$store.commit("SET_CHAT_ID", this.selectChatId);
        } else {
          console.warn(`数据类型 ${type.name} 没有配置appId`);
        }

        // 进入全屏对话模式
        this.toggleFullscreen();
      },

      toggleFullscreen() {
        this.isFullscreen = !this.isFullscreen;
      },

      handleDialogClose() {
        this.isFullscreen = false;
        this.$emit("exit-fullscreen");
      },

      handleKeydown(event) {
        if (event.key === "Escape" && this.isFullscreen) {
          this.handleDialogClose();
        }
      },

      async sendMessage() {
        if (!this.inputText.trim() || !this.selectedType) return;

        const query = this.inputText;
        this.inputText = "";

        // 如果不在全屏模式，则进入全屏模式
        if (!this.isFullscreen) {
          this.toggleFullscreen();
        }

        // 这里可以通过事件或其他方式将消息传递给对话框组件
        this.$nextTick(() => {
          // 可以通过ref或事件总线等方式与ConversationDialog通信
          console.log(`处理查询: ${query}, 类型: ${this.selectedType}`);
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .center_bottom {
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;

    // 非全屏模式样式（保持原有样式）
    .smart-qa-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      background: linear-gradient(
        135deg,
        rgba(13, 14, 35, 0.9) 0%,
        rgba(22, 28, 56, 0.9) 100%
      );
      border-radius: 8px;
      border: 1px solid rgba(0, 253, 250, 0.2);
      position: relative;

      .fullscreen-btn {
        padding: 6px;
        min-width: auto;
        color: #00fdfa;
        border: 1px solid rgba(0, 253, 250, 0.3);
        border-radius: 6px;
        transition: all 0.3s ease;
        position: absolute;
        right: 8px;
        top: 8px;
        z-index: 20;

        &:hover {
          background-color: rgba(0, 253, 250, 0.1);
          border-color: #00fdfa;
        }
      }

      .ai-robot-section {
        flex: 1;
        position: relative;
        min-height: 350px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;

        // 左侧数据类型选项
        .data-types-left {
          position: absolute;
          left: 30px;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          flex-direction: column;
          gap: 25px;
          z-index: 10;
        }

        // 右侧数据类型选项
        .data-types-right {
          position: absolute;
          right: 30px;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          flex-direction: column;
          gap: 25px;
          z-index: 10;
        }

        .data-type-side-item {
          width: 110px;
          height: 110px;
          background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.03) 100%
          );
          border: 1px solid rgba(0, 253, 250, 0.3);
          border-radius: 50%;
          cursor: pointer;
          transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(10px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
          position: relative;
          animation: slideInFade 0.8s ease-out forwards;
          opacity: 0;

          &::before {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            right: 3px;
            bottom: 3px;
            border-radius: 50%;
            background: linear-gradient(
              145deg,
              rgba(0, 253, 250, 0.08),
              transparent 60%
            );
            pointer-events: none;
          }

          &:hover {
            background: linear-gradient(
              145deg,
              rgba(0, 253, 250, 0.25) 0%,
              rgba(0, 253, 250, 0.1) 100%
            );
            border-color: rgba(0, 253, 250, 0.8);
            box-shadow: 0 12px 45px rgba(0, 253, 250, 0.5),
              0 0 35px rgba(0, 253, 250, 0.3);
            transform: scale(1.1) translateX(0);
            z-index: 16;

            .type-icon {
              transform: scale(1.15) rotate(8deg);
              box-shadow: 0 10px 30px rgba(0, 253, 250, 0.5);
            }

            .type-name {
              color: #ffffff;
              text-shadow: 0 3px 10px rgba(0, 253, 250, 0.6);
            }
          }

          &.active {
            background: linear-gradient(
              145deg,
              rgba(0, 253, 250, 0.35) 0%,
              rgba(0, 253, 250, 0.2) 100%
            );
            border: 2px solid #00fdfa;
            box-shadow: 0 0 60px rgba(0, 253, 250, 0.8),
              inset 0 0 35px rgba(0, 253, 250, 0.15);
            transform: scale(1.05);
            z-index: 17;

            .connection-line {
              display: block;
            }

            .type-icon {
              background: linear-gradient(45deg, #ffffff, #00fdfa);
              box-shadow: 0 10px 35px rgba(0, 253, 250, 0.7);
              animation: iconPulse 2.5s ease-in-out infinite;

              i {
                color: #000;
              }
            }

            .type-name {
              color: #00fdfa;
              font-weight: 700;
              text-shadow: 0 3px 15px rgba(0, 253, 250, 0.8);
            }
          }

          .type-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: linear-gradient(45deg, #00fdfa, #0099cc);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            box-shadow: 0 6px 20px rgba(0, 253, 250, 0.4);
            transition: all 0.3s ease;

            i {
              font-size: 20px;
              color: #000;
              font-weight: bold;
            }
          }

          .type-name {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.9);
            text-align: center;
            line-height: 1.2;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 95%;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
            transition: all 0.3s ease;
            letter-spacing: 0.8px;
          }

          .type-status {
            position: absolute;
            top: 10px;
            right: 10px;

            .status-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #00ff88;
              box-shadow: 0 0 12px #00ff88;
              animation: statusBlink 3s ease-in-out infinite;
            }
          }

          .connection-line {
            display: none;
            position: absolute;
            width: 5px;
            height: 45px;
            background: linear-gradient(
              to right,
              transparent,
              #00fdfa,
              transparent
            );
            top: 50%;
            right: -25px;
            transform: translateY(-50%);
            animation: connectionPulse 2s ease-in-out infinite;
            pointer-events: none;
            border-radius: 2px;
            box-shadow: 0 0 18px #00fdfa;
          }

          .data-types-right & .connection-line {
            left: -25px;
            right: auto;
          }
        }

        .ai-robot-container {
          z-index: 15;
          text-align: center;

          .robot-avatar {
            margin-bottom: 25px;

            .robot-image-wrapper {
              position: relative;
              display: inline-block;

              .robot-image {
                width: 220px;
                height: 220px;
                object-fit: contain;
                filter: drop-shadow(0 20px 50px rgba(0, 253, 250, 0.6));
                transition: all 0.5s ease;
                animation: robotFloat 5s ease-in-out infinite;

                &.speaking {
                  animation: robotFloat 5s ease-in-out infinite,
                    robotPulse 1s ease-in-out infinite;
                  filter: drop-shadow(0 20px 50px rgba(0, 253, 250, 0.9));
                  transform: scale(1.08);
                }
              }

              .status-indicator {
                position: absolute;
                top: 20px;
                right: 20px;

                .status-light {
                  width: 18px;
                  height: 18px;
                  border-radius: 50%;
                  background: #666;
                  transition: all 0.3s ease;
                  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);

                  &.standby {
                    background: radial-gradient(circle, #ffaa00, #ff6600);
                    box-shadow: 0 0 25px #ffaa00,
                      inset 0 3px 6px rgba(0, 0, 0, 0.4);
                    animation: statusPulse 3s ease-in-out infinite;
                  }

                  &.active {
                    background: radial-gradient(circle, #00ff88, #00aa55);
                    box-shadow: 0 0 35px #00ff88,
                      inset 0 3px 6px rgba(0, 0, 0, 0.4);
                    animation: statusPulse 1.5s ease-in-out infinite;
                  }
                }
              }

              .robot-glow {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 280px;
                height: 280px;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                pointer-events: none;
                transition: all 0.5s ease;

                &.standby {
                  background: radial-gradient(
                    circle,
                    transparent 50%,
                    rgba(255, 170, 0, 0.2) 60%,
                    rgba(255, 170, 0, 0.1) 70%,
                    transparent 80%
                  );
                  animation: robotGlow 5s ease-in-out infinite;
                }

                &.active {
                  background: radial-gradient(
                    circle,
                    transparent 50%,
                    rgba(0, 255, 136, 0.3) 60%,
                    rgba(0, 255, 136, 0.15) 70%,
                    transparent 80%
                  );
                  animation: robotGlow 3s ease-in-out infinite;
                }
              }
            }
          }

          .robot-info {
            h3 {
              color: #00fdfa;
              font-size: 22px;
              margin: 0 0 15px 0;
              font-weight: 800;
              text-shadow: 0 4px 16px rgba(0, 253, 250, 0.5);
              letter-spacing: 2px;
            }

            p {
              color: #b4b4b4;
              font-size: 14px;
              margin: 0;
              transition: all 0.3s ease;
              line-height: 1.6;
              font-weight: 500;
            }
          }
        }
      }

      .input-area {
        padding: 18px 24px;

        ::v-deep .input-box {
          .el-input__inner {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(0, 253, 250, 0.5);
            color: #ffffff;
            height: 44px;
            backdrop-filter: blur(12px);

            &::placeholder {
              color: #aaa;
              font-size: 14px;
            }

            &:focus {
              border-color: #00fdfa;
              box-shadow: 0 0 0 4px rgba(0, 253, 250, 0.2);
            }
          }

          .el-input-group__append {
            background: linear-gradient(45deg, #00fdfa, #0099cc);
            border-color: #00fdfa;
            border-radius: 0 22px 22px 0;

            .el-button {
              background-color: transparent;
              border: none;
              color: #000;
              height: 42px;
              font-weight: bold;

              &:hover {
                background-color: rgba(255, 255, 255, 0.2);
              }
            }
          }
        }
      }
    }

    // 全屏模式聊天界面样式
    .chat-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .chat-container {
      width: 40vw;
      height: 80vh;
      background: linear-gradient(
        135deg,
        rgba(26, 26, 46, 0.85) 0%,
        // 增加透明度
        rgba(22, 33, 62, 0.85) 50%,
        rgba(15, 52, 96, 0.85) 100%
      );
      color: #ffffff;
      border-radius: 16px; // 增加圆角
      border: 2px solid rgba(0, 253, 250, 0.4);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(0, 253, 250, 0.2); // 添加发光效果
      display: flex;
      flex-direction: column;
      overflow: hidden;
      backdrop-filter: blur(20px); // 增加背景模糊

      .chat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        background: rgba(0, 0, 0, 0.2); // 更透明
        border-bottom: 1px solid rgba(0, 253, 250, 0.3);
        backdrop-filter: blur(10px);
        flex-shrink: 0;

        .chat-title {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 16px; // 稍微缩小字体
          font-weight: 600;
          color: #00fdfa;

          i {
            font-size: 18px;
          }
        }

        .exit-fullscreen-btn {
          color: #ffffff;
          padding: 8px;
          border-radius: 6px;

          &:hover {
            background-color: rgba(255, 255, 255, 0.15);
            color: #00fdfa;
          }
        }
      }

      .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 15px; // 减少内边距
        background: rgba(0, 0, 0, 0.05); // 更透明

        &::-webkit-scrollbar {
          width: 4px; // 缩窄滚动条
        }

        &::-webkit-scrollbar-track {
          background: rgba(255, 255, 255, 0.05);
          border-radius: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background: rgba(0, 253, 250, 0.4);
          border-radius: 2px;

          &:hover {
            background: rgba(0, 253, 250, 0.6);
          }
        }

        .message-item {
          margin-bottom: 15px; // 减少间距
          display: flex;
          align-items: flex-start;

          &.ai {
            justify-content: flex-start;
          }

          &.user {
            justify-content: flex-end;
          }

          .avatar {
            width: 36px; // 缩小头像
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px; // 减少边距
            flex-shrink: 0;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 50%;
            }

            i {
              font-size: 18px;
              color: #00fdfa;
            }
          }

          .ai-message .avatar {
            background: linear-gradient(45deg, #00fdfa, #0099cc);
          }

          .user-message .avatar {
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
          }

          .message-content {
            max-width: 75%; // 稍微增加最大宽度

            .message-bubble {
              background: rgba(255, 255, 255, 0.12); // 稍微增加透明度
              border-radius: 16px;
              padding: 12px 16px; // 减少内边距
              backdrop-filter: blur(10px);
              border: 1px solid rgba(255, 255, 255, 0.15);
              line-height: 1.5;
              word-wrap: break-word;
              font-size: 14px; // 稍微缩小字体

              .welcome-header {
                font-size: 15px; // 缩小字体
                font-weight: 600;
                color: #00fdfa;
                margin-bottom: 12px; // 减少间距
                text-align: center;
              }

              .welcome-buttons {
                display: flex;
                flex-wrap: wrap;
                gap: 6px; // 减少间距
                margin-top: 8px;
                justify-content: center;

                .welcome-btn {
                  font-size: 11px; // 缩小字体
                  height: 26px; // 缩小高度
                  padding: 0 10px; // 减少内边距
                  border-radius: 13px;
                  border-color: rgba(0, 253, 250, 0.5);
                  color: #00fdfa;
                  background: rgba(0, 253, 250, 0.08);

                  &:hover {
                    background-color: rgba(0, 253, 250, 0.25);
                    border-color: #00fdfa;
                  }
                }
              }

              .welcome-fallback {
                color: #ffffff;
                text-align: center;
                font-size: 13px; // 缩小字体
                line-height: 1.5;
                white-space: pre-wrap;
              }
            }

            .ai-message & .message-bubble {
              background: linear-gradient(
                135deg,
                rgba(0, 253, 250, 0.18) 0%,
                rgba(0, 153, 204, 0.12) 100%
              );
              border-left: 3px solid #00fdfa;
            }

            .user-message & .message-bubble {
              background: linear-gradient(
                135deg,
                rgba(107, 107, 255, 0.25) 0%,
                rgba(78, 205, 196, 0.18) 100%
              );
              border-right: 3px solid #4ecdc4;
            }

            .typing-indicator {
              display: flex;
              gap: 3px; // 减少间距
              align-items: center;
              margin-top: 4px;

              .typing-dot {
                width: 6px; // 缩小点
                height: 6px;
                border-radius: 50%;
                background: #00fdfa;
                animation: typing 1.4s ease-in-out infinite;

                &:nth-child(1) {
                  animation-delay: 0s;
                }
                &:nth-child(2) {
                  animation-delay: 0.2s;
                }
                &:nth-child(3) {
                  animation-delay: 0.4s;
                }
              }
            }
          }
        }
      }

      .chat-input-area {
        padding: 15px; // 减少内边距
        background: rgba(0, 0, 0, 0.2); // 更透明
        border-top: 1px solid rgba(0, 253, 250, 0.3);
        backdrop-filter: blur(10px);
        flex-shrink: 0;

        .input-wrapper {
          display: flex;
          gap: 10px; // 减少间距
          align-items: center;

          .chat-input {
            flex: 1;

            ::v-deep .el-input__inner {
              background-color: rgba(255, 255, 255, 0.12);
              border: 1px solid rgba(0, 253, 250, 0.4);
              color: #ffffff;
              height: 42px; // 稍微缩小高度
              border-radius: 21px;
              font-size: 13px; // 缩小字体
              padding: 0 18px;

              &::placeholder {
                color: rgba(255, 255, 255, 0.65);
                font-size: 13px;
              }

              &:focus {
                border-color: #00fdfa;
                box-shadow: 0 0 0 2px rgba(0, 253, 250, 0.25);
              }
            }
          }

          .send-btn {
            height: 42px; // 与输入框同高
            padding: 0 24px; // 减少内边距
            border-radius: 21px;
            background: linear-gradient(45deg, #00fdfa, #0099cc);
            border: none;
            font-weight: 600;
            font-size: 13px; // 缩小字体
            color: #000;

            &:hover {
              background: linear-gradient(45deg, #0099cc, #00fdfa);
              transform: translateY(-1px); // 减少悬浮效果
              box-shadow: 0 6px 20px rgba(0, 253, 250, 0.4);
            }

            &:disabled {
              background: rgba(255, 255, 255, 0.2);
              color: rgba(255, 255, 255, 0.5);
              transform: none;
              box-shadow: none;
            }
          }
        }
      }
    }

    // 改进的动画定义
    @keyframes slideInFade {
      0% {
        opacity: 0;
        transform: translateX(-30px);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes robotFloat {
      0%,
      100% {
        transform: translateY(0px) scale(1) rotate(0deg);
      }
      25% {
        transform: translateY(-8px) scale(1.02) rotate(1deg);
      }
      50% {
        transform: translateY(-15px) scale(1.03) rotate(0deg);
      }
      75% {
        transform: translateY(-8px) scale(1.02) rotate(-1deg);
      }
    }

    @keyframes robotPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.12);
      }
    }

    @keyframes robotGlow {
      0%,
      100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
      }
      50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
      }
    }

    @keyframes statusPulse {
      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }
      50% {
        opacity: 0.4;
        transform: scale(1.5);
      }
    }

    @keyframes statusBlink {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.1;
      }
    }

    @keyframes connectionPulse {
      0%,
      100% {
        opacity: 0;
        transform: translateY(-50%) scaleX(0.3);
      }
      50% {
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
      }
    }

    @keyframes iconPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
    }

    @keyframes typing {
      0%,
      60%,
      100% {
        transform: translateY(0);
        opacity: 0.4;
      }
      30% {
        transform: translateY(-10px);
        opacity: 1;
      }
    }
  }
</style>
